<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    tbody .layui-table-cell {
      height: 37px
    }

    #ac_add_out {
      display: none;
    }

    #pc_change_out {
      display: none;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"></i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">新闻资讯</a>
        <a href="">行业动态</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>文章修改</cite></a>
      </span>
    </div>
    <!-- 表格 -->
    <div class="layui-card-body">
      <table class="layui-table " lay-even lay-skin="row " id="article_classify_list" lay-size="	lg ">
      </table>
    </div>
  </div>

  <!-- 添加的弹出层 -->
  <div id="ac_add_out">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-inline">
          <input type="text" name="pc_name" required lay-verify="required" placeholder="请输入轮播图名称" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">分类排序</label>
        <div class="layui-input-inline">
          <input type="number" name="pc_sort" required lay-verify="required|number" placeholder="请输入轮播排序"
            autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="pcAddForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 添加的修改层 -->
  <div id="pc_change_out">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <input type="hidden" name="pc_id" id="update_pc_id">
        <div class="layui-input-inline">
          <input type="text" name="pc_name" required lay-verify="required" id="update_pc_name" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">分类排序</label>
        <div class="layui-input-inline">
          <input type="number" name="pc_sort" id="update_pc_sort" required lay-verify="required|number"
            autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="pcUpdateForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<!-- 表格上方操作 -->
<script type="text/html" id="banner_list_top">
  <div>

    <span type="button" class="layui-btn layui-btn-danger" style="margin-right: 10x;"><i
        class="layui-icon layui-icon-delete"></i>批量删除</span>
    <span type="button" class="layui-btn layui-btn-normal" onclick="ac_add()" style=" margin-right: 20px;"><i
        class="layui-icon layui-icon-add-1"></i>添加</span>
    <div class=" layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输入导航名称" id="search_input" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" id="search_button" class=" layui-btn"><i
        class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>
<!-- 操作模块 -->
<script type="text/html" id="operation">
  <button type="button" onclick="updateAllPC('{{d.pc_id}}')" class="layui-btn layui-btn-warm">修改</button>
  <button type="button" class="layui-btn  layui-btn-danger" onclick="deletePC('{{d.pc_id}}')">删除</button></div>
</script>
<!-- 轮播图排序 -->
<script type="text/html" id="banner_sort_list">
  <div>
    <input type="text" class="layui-input" autocomplete="off" value="{{d.ac_sort}}"
      onchange="updateSort('{{d.ac_sort}}',this)"
      style="width: 50px;border-color: #999;padding-left: 0;text-align: center;height: 27px;">
  </div>
</script>
<script>
  var layer
  var uploadLayer
  var $
  var tableIns
  var form

  function ac_add() {
    layer.open({
      title: '在线调试',
      content: $('#ac_add_out')
    });
  }


  layui.use(['element', 'layer', 'util', 'table', 'form', 'jquery'], function () {

    var {
      table,
      element,
      util,

    } = layui
    layer = layui.layer
    $ = layui.$
    form = layui.form
    tableIns = table.render({
      elem: '#article_classify_list',
      url: '/admin/article/classlist',
      cols: [
        [{
          field: 'pc_checked',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'ac_id',
          title: 'ID',
          width: '20%',
          sort: true,
        }, {
          field: 'ac_name',
          title: '轮播图名称',
          width: '20%',
        }, {
          field: 'ac_sort',
          title: '分类排序',
          sort: true,
          width: '20%',
          templet: '#banner_sort_list'
        }, {
          field: 'experience',
          title: '操作',
          width: '35%',
          templet: '#operation',
          fixed: 'right'
        }]
      ],
      loading: true,
      toolbar: '#banner_list_top',
      title: '商品分类详情表',
      totalRow: true,
      // page: true,
      // limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      // limit: 10
    })


    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
</script>